<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--购物车页面</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-cart.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="css/bootstrap.min.css"></script>
<body>

<div id="cartApp">

    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">

        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo"><span class="title">商品评价</span></div>
        </div>
        <div class="container">
            <div class="row">

                <div class="col-md-3" style="text-align: center">
                    <!--<img src="img/ad.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">-->
                    <img :src="this.orderEvaluate.skuImage" class="img-responsive"
                         alt="Cinque Terre">
                    <p>{{ orderEvaluate.skuName }}</p>
                    <p>￥{{ orderEvaluate.skuPrice }}</p>
                </div>

                <div class="col-md-6">
                    <p>
                        星级评价：
                        <select name="status" id="status" v-model="selected">
                            <option value="">请选择</option>
                            <option value="5">五星评价</option>
                            <option value="4">四星评价</option>
                            <option value="3">三星评价</option>
                            <option value="2">二星评价</option>
                            <option value="1">一星评价</option>
                        </select>
                    </p>
                    <textarea rows="5" cols="40" v-model="textarea"></textarea>

                    <!-- <input type="file" name="" id="" >-->
                    <template>
                    <div id="wp" class="warpper">
                        <a id="btnSelect">单击选择要上传的晒图照片</a>
                        <input type="file" ref="file" />
                        <button  class="btn" @click="save()">确认上传</button>
                    </div>
                    </template>
                </div>
            </div>
            <div class="controls" style="text-align: center">
                <button style="color: red" href="javascript:void(0)" @click="saveEvaluate()">发表
                </button>
            </div>
        </div>
    </div>

</div>


<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var cartVm = new Vue({
        el: "#cartApp",
        data: {
            ly,
            carts: [],//存储的购物车
            orderEvaluate: {}, //记录选中的商品
            selected: '',
            textarea: '',
        },
        created() {
            this.test();
        },
        computed: {
            //模拟添加数据
            test1() {
                this.orderEvaluate["orderScore"] = this.selected;
                this.orderEvaluate["orderComment"] = this.textarea;
            }

        },
        methods: {
            //判断用户是否登录
            verifyUser() {
                return ly.http.get('/auth/verify');
            },
            //添加评价到mangoDB
            saveEvaluate() {
                this.verifyUser().then(resp => {
                    //存储评价到mangoDB
                    // let haha = ly.stringify(this.orderEvaluate);
                    ly.http.post('/evaluate/save', this.orderEvaluate).then(resp => {
                        console.log('添加评论成功');
                        // window.location.href = "http://www.leyou.com/getOrderInfo.html";
                    }).catch(e => {
                        console.log('添加评论失败');
                    })
                    //(2)未登录
                }).catch(e => {
                    //2.1提示登录超时，请重新登录

                })
            },

            //测试数据
            test() {
                // //模拟数据
                // this.orderEvaluate["orderScore"]=this.selected;
                this.orderEvaluate.skuName = "哇害哇害";
                this.orderEvaluate.spuId = 11111;
                this.orderEvaluate.userName = "李娇妻";
                this.orderEvaluate.skuImage = "img/ad.jpg";
                this.orderEvaluate.skuPrice = 9999;

                this.orderEvaluate.orderScore = "";
                this.orderEvaluate.orderComment = "测试一下";
                this.orderEvaluate.orderImage = "评价照片";
            },

            //上传晒图照片
            save(){
                let formData=new FormData();
                formData.append('file',this.$refs.file.files[0])
                ly.http.post('/upload/image/aliyun',formData,{
                    'Content-Type':'multipart/form-data'
                }).then(res=>{
                    this.orderEvaluate["orderImage"]=res.data;
                }).catch(e=>{
                    console.log("上传失败")

                })
            }

        },

        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        }
    })
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->

<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>

</body>

</html>